<template>
  <div>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button v-permission="[10020304,1]" type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button v-permission="[10020304,2]" type="primary" icon="el-icon-plus" @click="add">新增</el-button>

      </div>
    </div>
    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      :row-class-name="tableRowClassName"
      @fetch="fetchData"
    />
    <addkeys ref="addkeys" @Refresh="Refresh" />
  </div>
</template>

<script>
  import { CmsSpecialKeyWords, CmsSpecialKeysDelete } from '@/api'
  export default {
    name: 'key',
    components: {
      addkeys: require('./addkeys.vue').default
    },
    data() {
      return {
        keyStatusMap: [{ 'value': 1, 'desc': '未启用', 'key': 'CLOSE' }, { 'value': 2, 'desc': '已启用', 'key': 'OPEN' }, { 'value': -1, 'desc': '已作废', 'key': 'DELETE' }],
        tableData: {
          total: 0,
          column: [
            { type: 'index' },
            { label: '关键字', prop: 'keyName' },
            { label: '状态', prop: 'keyStatus', width: 150,
              render: (h, { row, column }) => <span class={this.statusClass(row.keyStatus)}>{this.keyStatusMap.find(l => l.value === row.keyStatus).desc }</span>
            },
            { label: '创建人', prop: 'createUser', width: 200 },
            { label: '操作', prop: 'op', width: 85,
              render: (h, { row, $index }) => {
                return (
                 <div>
                   {row.keyStatus !== -1 && <el-link v-permission={[10020304, 3]} underline={false} size='mini' onClick={() => this.edit(row)}>编辑</el-link>}
                   {row.keyStatus !== -1 && <el-link v-permission={[10020304, 4]} type='danger' underline={false} size='mini' onClick={() => this.del(row) } >作废</el-link>}
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    methods: {
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      add() {
        this.$refs.addkeys.open()
      },
      edit(row) {
        this.$refs.addkeys.open(row)
      },
      async del(row) {
        this.$confirm('确认作废当前关键字数据？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { status } = await CmsSpecialKeysDelete({ keyId: row.keyId })
          if (status === 200) {
            this.$message({
              type: 'success',
              message: '关键字作废成功'
            })
            await this.$refs.lbTable.fetch({ currentPage: 1 })
          }
        })
      },
      Refresh() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      // CmsSpecialKeyWords
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const query = {
          currentPage,
          pageSize
        }
        const res = await CmsSpecialKeyWords(query)
        // this.tableData.data = res.data.rows
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      statusClass(keyStatus) {
        if (keyStatus === 2) return 'themeColor'
        else if (keyStatus === -1) return 'dangerColor'
        else return ''
      },
      tableRowClassName({ row, rowIndex }) {
        if (row.keyStatus === -1) return 'red-bg-row'
        else return ''
      }
    }
  }
</script>

<style scoped>

</style>
